<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>心率记录</title>
  <link rel="stylesheet" href="./assets/common.css">
</head>
<body>
<div>
  <canvas id="mountNode" style="position: relative;">
  </canvas>
</div>
<script src="./assets/jquery-3.2.1.min.js"></script>
<script src="../build/f2-all.js"></script>
<script>
const data = [
  { date: '9/14/2015', rate: 85 },
  { date: '9/15/2015', rate: 60 },
  { date: '9/16/2015', rate: 59 },
  { date: '9/17/2015', rate: 55 },
  { date: '9/18/2015', rate: 80 },
  { date: '9/21/2015', rate: 98 },
  { date: '9/22/2015', rate: 96 },
  { date: '9/23/2015', rate: 84 },
  { date: '9/24/2015', rate: 84 },
  { date: '9/25/2015', rate: 96 },
  { date: '9/28/2015', rate: 84 },
  { date: '9/29/2015', rate: 60 },
  { date: '9/30/2015', rate: 90 },
  { date: '10/1/2015', rate: 63 },
  { date: '10/2/2015', rate: 88 },
  { date: '10/5/2015', rate: 110 },
  { date: '10/6/2015', rate: 100 },
  { date: '10/7/2015', rate: 120 },
  { date: '10/8/2015', rate: 80 },
  { date: '10/9/2015', rate: 113 },
  { date: '10/12/2015', rate: 116 },
  { date: '10/13/2015', rate: 96 },
  { date: '10/14/2015', rate: 100 },
  { date: '10/15/2015', rate: 102 },
  { date: '10/16/2015', rate: 90 },
  { date: '10/19/2015', rate: 96 },
  { date: '10/20/2015', rate: 130 },
  { date: '10/21/2015', rate: 145 },
  { date: '10/22/2015', rate: 103 },
  { date: '10/23/2015', rate: 102 },
  { date: '10/26/2015', rate: 155 },
  { date: '10/27/2015', rate: 100 },
  { date: '10/28/2015', rate: 104 },
  { date: '10/29/2015', rate: 97 },
  { date: '10/30/2015', rate: 98 },
  { date: '11/2/2015', rate: 116 },
  { date: '11/3/2015', rate: 95 },
  { date: '11/4/2015', rate: 93 },
  { date: '11/5/2015', rate: 92 },
  { date: '11/6/2015', rate: 99 },
  { date: '11/9/2015', rate: 75 },
  { date: '11/10/2015', rate: 110 },
  { date: '11/11/2015', rate: 76 },
  { date: '11/12/2015', rate: 82 },
  { date: '11/13/2015', rate: 107 }
];

const chart = new F2.Chart({
  id: 'mountNode',
  width: window.innerWidth,
  height: window.innerWidth * 0.64,
  pixelRatio: window.devicePixelRatio,
  padding: [ 'auto', 'auto', 60 ]
});

chart.source(data, {
  date: {
    ticks: [ '9/14/2015', '10/1/2015', '11/2/2015' ]
  }
});
chart.axis('date', {
  label: {
    textAlign: 'start'
  },
  tickLine: {
    length: 5,
    stroke: '#E8E8E8'
  }
});
chart.line().position('date*rate');

// 标域，心率过低
chart.guide()
  .regionFilter({
    start: [ 'min', 'min' ],
    end: [ 'max', 60 ],
    color: '#1AC44D'
  });
chart.guide().rect({
    start: [ 'min', 'min' ],
    end: [ 'max', 60 ],
    style: {
      fill: '#e8e8e8',
      opacity: 0.2
    }
  });
chart.guide().text({
    position: [ 'max', 50 ],
    content: '心率过低',
    offsetX: -5,
    style: {
      fill: '#1AC44D',
      textAlign: 'end'
    }
  });

  // 标域，心率过高
chart.guide()
  .regionFilter({
    start: [ 'min', 100 ],
    end: [ 'max', 'max' ],
    color: '#FF7875'
  });
chart.guide().rect({
    start: [ 'min', 100 ],
    end: [ 'max', 'max' ],
    style: {
      fill: '#e8e8e8',
      opacity: 0.2
    }
  });
chart.guide().text({
    position: [ 'max', 130 ],
    content: '心率过高',
    offsetX: -5,
    style: {
      fill: '#FF7875',
      textAlign: 'end'
    }
  });
chart.render();
</script>
</body>
</html>
